<!-- 进销存日报表 -->
<template>
  <el-drawer
    title="列设置"
    :visible.sync="drawerSetting"
    :before-close="handleClose"
  >
    <div class="checkbox-hood">
      <el-checkbox
        :indeterminate="isIndeterminate"
        v-model="checkAll"
        @change="handleCheckAllChange"
        >全选/全不选</el-checkbox
      >
      <div style="margin: 15px 20px">
        <el-checkbox-group
          v-model="checkedCities"
          @change="handleCheckedCitiesChange"
          style="display: flex; flex-direction: column"
        >
          <el-checkbox
            v-for="city in cities[0]"
            v-if="citiesList.includes(city.is)"
            :label="city.is"
            :key="city.is"
            disabled
            >{{ city.label }}</el-checkbox
          >
        </el-checkbox-group>

        <div class="checkbox-div">期初</div>
        <el-checkbox-group
          v-model="checkedCities"
          @change="handleCheckedCitiesChange"
          style="display: flex; flex-direction: column"
        >
          <el-checkbox
            v-for="city in cities[1]"
            v-if="citiesList.includes(city.is)"
            :label="city.is"
            :key="city.is"
            >{{ city.label }}</el-checkbox
          >
        </el-checkbox-group>

        <div class="checkbox-div">本期(+)</div>
        <el-checkbox-group
          v-model="checkedCities"
          @change="handleCheckedCitiesChange"
          style="display: flex; flex-direction: column"
        >
          <el-checkbox
            v-for="city in cities[2]"
            v-if="citiesList.includes(city.is)"
            :label="city.is"
            :key="city.is"
            >{{ city.label }}</el-checkbox
          >
        </el-checkbox-group>

        <div class="checkbox-div">本期(-)</div>
        <el-checkbox-group
          v-model="checkedCities"
          @change="handleCheckedCitiesChange"
          style="display: flex; flex-direction: column"
        >
          <el-checkbox
            v-for="city in cities[3]"
            v-if="citiesList.includes(city.is)"
            :label="city.is"
            :key="city.is"
            >{{ city.label }}</el-checkbox
          >
        </el-checkbox-group>

        <div class="checkbox-div">本期调整(+)</div>
        <el-checkbox-group
          v-model="checkedCities"
          @change="handleCheckedCitiesChange"
          style="display: flex; flex-direction: column"
        >
          <el-checkbox
            v-for="city in cities[4]"
            v-if="citiesList.includes(city.is)"
            :label="city.is"
            :key="city.is"
            >{{ city.label }}</el-checkbox
          >
        </el-checkbox-group>

        <div class="checkbox-div">库存损益(+)</div>
        <el-checkbox-group
          v-model="checkedCities"
          @change="handleCheckedCitiesChange"
          style="display: flex; flex-direction: column"
        >
          <el-checkbox
            v-for="city in cities[5]"
            v-if="citiesList.includes(city.is)"
            :label="city.is"
            :key="city.is"
            >{{ city.label }}</el-checkbox
          >
        </el-checkbox-group>

        <div class="checkbox-div">结存</div>
        <el-checkbox-group
          v-model="checkedCities"
          @change="handleCheckedCitiesChange"
          style="display: flex; flex-direction: column"
        >
          <el-checkbox
            v-for="city in cities[6]"
            v-if="citiesList.includes(city.is)"
            :label="city.is"
            :key="city.is"
            >{{ city.label }}</el-checkbox
          >
        </el-checkbox-group>

        <el-checkbox-group
          v-model="checkedCities"
          @change="handleCheckedCitiesChange"
          style="display: flex; flex-direction: column; margin-top: 50px"
        >
          <el-checkbox
            v-for="city in cities[7]"
            v-if="citiesList.includes(city.is)"
            :label="city.is"
            :key="city.is"
            >{{ city.label }}</el-checkbox
          >
        </el-checkbox-group>
      </div>
      <div style="margin: 25% 0px 10% 55%">
        <el-button @click="handleClose" size="medium">取消</el-button>
        <el-button type="primary" @click="onSubmit" size="medium"
          >确定</el-button
        >
      </div>
    </div>
  </el-drawer>
</template>

<script>
import { InvoicingDailyReport } from "@/utils/dataReport";
import {
  customListColumnGet,
  customListColumnSave,
  customListColumnUpdate,
} from "@/api/nonOil/statement";

export default {
  name: "InvoicingSetting",
  props: {
    drawerSetting: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      checkAll: false,
      checkedCities: [],
      cities: [],
      citiesList: [],
      isIndeterminate: true,
      id: null,
    };
  },

  methods: {
    // 查询日报表列配置
    async getcustomListColumn() {
      const result = await customListColumnGet({ tableId: 4 });

      if (!result.data) {
        customListColumnSave({
          tableId: 4,
          columnId: this.citiesList.join(","),
        }).then((res) => {
          this.getcustomListColumn();
        });
      } else {
        this.checkedCities = result.data.columnId.split(",");
        this.id = result.data.id;
      }
    },

    // 点击确认
    async onSubmit() {
      const result = await customListColumnUpdate({
        id: this.id,
        columnId: this.checkedCities.join(","),
      });
      if (result && result.code == 200) {
        this.$message.success(result.msg);
        this.handleClose();
        this.$emit("confirm");
      } else {
        this.$message.error(result.msg);
      }
    },

    // 全选全不选
    handleCheckAllChange(val) {
      this.checkedCities = val ? this.citiesList : ["1", "2", "3", "4"];
      this.isIndeterminate = false;
    },

    // 选择了列表
    handleCheckedCitiesChange(value) {
      let checkedCount = value.length;
      this.checkAll = checkedCount === this.cities.length;
      this.isIndeterminate =
        checkedCount > 0 && checkedCount < this.cities.length;
    },

    // 退出列设置
    handleClose() {
      this.$emit("update:drawerSetting", false);
    },
  },

  watch: {
    drawerSetting: {
      deep: true, // 深度监听
      handler(newVal, oldVal) {
        this.cities = InvoicingDailyReport;
        if (newVal) {
          let citiesList = [
            ...InvoicingDailyReport[0],
            ...InvoicingDailyReport[1],
            ...InvoicingDailyReport[2],
            ...InvoicingDailyReport[3],
            ...InvoicingDailyReport[4],
            ...InvoicingDailyReport[5],
            ...InvoicingDailyReport[6],
            ...InvoicingDailyReport[7],
          ];
          citiesList.forEach((item) => {
            this.citiesList.push(item.is);
          });
          this.getcustomListColumn();
        } else {
          this.citiesList = [];
        }
      },
    },
  },
};
</script>

<style lang="scss" scoped>
.checkbox-hood {
  margin: 3% 5%;
  overflow-y: scroll;
  height: 88vh;
}
.checkbox-div {
  margin: 20px 0px 10px 0px;
  font-size: 14px;
}
</style>
